<template>
  <div>
    <van-nav-bar title="账号登录" left-arrow @click-left="$router.go(-1)" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="loginUser.username"
        name="用户名"
        label=""
        placeholder="请输入账号"
        label-height="3rem"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="loginUser.password"
        type="password"
        name="密码"
        label=""
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          square
          color="#1cb676"
          :loading='isloging'
          loading-type="spinner"
          loading-text="狂掉头发中..."
          >点击登录</van-button
        >
        <a href="">还没有账号？去注册~~~</a>
      </div>
    </van-form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { Notify } from 'vant'
export default {
  name: 'Login',
  data () {
    return {
      isloging: false,
      loginUser: {
        username: 'hzhmqd',
        password: '123456'
      }
    }
  },
  components: {
    [Notify.Component.name]: Notify.Component
  },
  methods: {
    ...mapActions(['loginAction']),
    async onSubmit (values) {
      this.isloging = true
      try {
        await this.loginAction(this.loginUser)
        // console.log('submit', values)
        Notify({ type: 'success', message: '账号登录成功' })
        this.isloging = false
        // 登陆成功跳转到首页
        this.$router.replace('/layout/home')
      } catch (error) {
        Notify({ type: 'warning', message: '登陆失败，请查看您的账号密码是否有误' })
        this.isloging = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
a {
  font-size: 0.3rem;
  color: #666;
}
/deep/.van-field {
  height: 1.85rem;
}
.van-cell{
  line-height: 1.64rem;
  font-size: 0.47333rem;
}
</style>
